<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script th:src="@{/layui/layui.all.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <link href="/layui/css/layui.css">

</head>
<body>
<h1 th:inlines="text">多文件上传</h1>
<form  method="post" enctype="multipart/form-data">

        选择文件: <input type="file" id="fileName1" name="fileName" /><br>
        <input type="file" id="fileName2" name="fileName" /><br>
        <input type="file" id="fileName3" name="fileName" /><br>
    </p>
    <p>
        <input type="button" id="submit" value="提交" />
    </p>
</form>
 <div id="showimg" style="display: none" >

      </div>
  </th:block>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer;

        $("#submit").click(function () {

            var fileName1 = $('#fileName1')[0].files[0];
            var fileName2 = $('#fileName2')[0].files[0];
            var fileName3 = $('#fileName3')[0].files[0];
            if (fileName1 == "" || fileName1 == null) {
                alert("请选择文件");
                return false;
            } else {
                var formData = new FormData(); //必须得用formData
                formData.append("fileName", fileName1);
                formData.append("fileName", fileName2);
                formData.append("fileName", fileName3);
                $.ajax({
                    type: "post",
                    data: formData,//必须得用这个格式，不然报错
                    url: "/uploads",
                    processData: false,  //// 使数据不做处理
                    contentType: false  // 不要设置Content-Type请求头
                   ,success:function (data) {
                        console.log(data)
                        console.log(data.msg)
                        var files=data.data;
                        if(data.msg='ok'){
                           layer.msg("上传成功",{time:3000},function () {
                              var showimg=$("#showimg").show();
                               $.each(files,function(index,file){
                                   //利用jquery方法创建html组件
                                   //参数一：<标签名>    参数二：属性列表
                                   var img = $("<img>",{
                                       "src":file
                                   });
                                   console.log(img);
                                   showimg.append(img);
                               });





                           })
                        }

                    }
                })



            }
        })
    });
</script>
</body>
</html>